<template>
	<cu-card>
		<view class="cu-w-100 cu-row cu-font-weight cu-font-big cu-py-20">
			<view style="border-left: 10rpx solid #CCC; margin-right: 20rpx;"></view>
			收支报告
		</view>
		<view class="cu-w-100 cu-row cu-j-sb cu-pt-10">
			<view class="cu-span24-12 cu-row cu-j-start cu-a-center">
				<cu-icon custom-prefix="iconfont" slot="icon" size="32" name="icon-jin"></cu-icon>
				<view class="cu-p-10">
					<view class="cu-font-big cu-font-weight cu-py-10">本日</view>
					<view class="cu-text-light-muted cu-font-sm">{{ statements.today.date |formatDate}}</view>
				</view>
			</view>
			<view class="cu-span24-12 cu-row cu-j-start cu-a-center">
				<view class="cu-w-100 cu-row cu-j-end">
					<view class="cu-text-light-muted cu-font-sm">总收入：</view>
					<view class="cu-font-weight">
						<u-count-to color="#dd524d" :startVal="0" font-size="16"
							:endVal="statements.today.totalRevenue | fmtAmount" :useEasing="false"
							:decimals="2" :duration="500"  separator=","></u-count-to>
					</view>
				</view>
				<view class="cu-w-100 cu-row cu-j-end">
					<view class="cu-text-light-muted cu-font-sm">总支出：</view>
					<view class="cu-font-weight">
						<u-count-to color="#17a2b8" :startVal="0" font-size="16"
							:endVal="statements.today.totalEcpenditure | fmtAmount" :useEasing="false"
							:decimals="2" :duration="500"  separator=","></u-count-to>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-w-100 cu-row cu-j-sb cu-pt-10">
			<view class="cu-span24-12 cu-row cu-j-start cu-a-center">
				<cu-icon custom-prefix="iconfont" slot="icon" size="32" name="icon-zhou"></cu-icon>
				<view class="cu-p-10">
					<view class="cu-font-big cu-font-weight cu-py-10">本周</view>
					<view class="cu-text-light-muted cu-font-sm">{{statements.week.startDate | formatMonth}}-{{statements.week.endDate | formatMonth}}</view>
				</view>
			</view>
			<view class="cu-span24-12 cu-row cu-j-start cu-a-center">
				<view class="cu-w-100 cu-row cu-j-end">
					<view class="cu-text-light-muted cu-font-sm">总收入：</view>
					<view class="cu-font-weight">
						<u-count-to color="#dd524d" :startVal="0" font-size="16"
							:endVal="statements.week.totalRevenue | fmtAmount" :useEasing="false"
							:decimals="2" :duration="500"  separator=","></u-count-to>
					</view>
				</view>
				<view class="cu-w-100 cu-row cu-j-end">
					<view class="cu-text-light-muted cu-font-sm">总支出：</view>
					<view class="cu-font-weight">
						<u-count-to color="#17a2b8" :startVal="0" font-size="16"
							:endVal="statements.week.totalEcpenditure | fmtAmount" :useEasing="false"
							:decimals="2" :duration="500"  separator=","></u-count-to>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-w-100 cu-row cu-j-sb cu-pt-10">
			<view class="cu-span24-12 cu-row cu-j-start cu-a-center">
				<cu-icon custom-prefix="iconfont" slot="icon" size="32" name="icon-yue"></cu-icon>
				<view class="cu-p-10">
					<view class="cu-font-big cu-font-weight cu-py-10">本月</view>
					<view class="cu-text-light-muted cu-font-sm">{{statements.month.startDate | formatMonth}}-{{statements.month.endDate | formatMonth}}</view>
				</view>
			</view>
			<view class="cu-span24-12 cu-row cu-j-start cu-a-center">
				<view class="cu-w-100 cu-row cu-j-end">
					<view class="cu-text-light-muted cu-font-sm">总收入：</view>
					<view class="cu-font-weight">
						<u-count-to color="#dd524d" :startVal="0" font-size="16"
							:endVal="statements.month.totalRevenue | fmtAmount" :useEasing="false"
							:decimals="2" :duration="500"  separator=","></u-count-to>
					</view>
				</view>
				<view class="cu-w-100 cu-row cu-j-end">
					<view class="cu-text-light-muted cu-font-sm">总支出：</view>
					<view class="cu-font-weight">
						<u-count-to color="#17a2b8" :startVal="0" font-size="16"
							:endVal="statements.month.totalEcpenditure | fmtAmount" :useEasing="false"
							:decimals="2" :duration="500"  separator=","></u-count-to>
					</view>
				</view>
			</view>
		</view>
	</cu-card>
</template>

<script>
	let vk = uni.vk;
	export default {
		props: {
			statements: {type: Object,default: {
					today:{
						date: Date.now(),
						totalRevenue: 0,
						totalEcpenditure: 0
					},
					week:{
						startDate: Date.now(),
						endDate: Date.now(),
						totalRevenue: 0,
						totalEcpenditure: 0
					},
					month:{
						startDate: Date.now(),
						endDate: Date.now(),
						totalRevenue: 0,
						totalEcpenditure: 0
					}
				}},
		},
		filters: {
			formatDate(value) {
				if (!value) return '';
				const date = new Date(value);
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: 'long',
					day: 'numeric'
				});
			},
			formatMonth(value) {
				if (!value) return '';
				const date = new Date(value);
				return date.toLocaleString('zh-CN', {
					month: 'long',
					day: 'numeric'
				});
			},
			fmtAmount(value) {
				if (!value) return 0;
				let rtn = value / 100
				return rtn.toFixed(2);
			},
		},
		data() {
			return {
			};
		}
	}
</script>

<style lang="scss">
	
</style>
